<template>
  <div class="param-main">
    <el-form ref="tblMain" :model="tblMain" labelPosition="right" inline="" label-suffix=":" label-width="110px">
      <el-row :span="24">
        <el-col :span="6">
          <el-form-item label="养护套餐名称">
            <el-input v-model="tblMain.param.themeName" size="small" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="page-pane2">
        <el-button type="primary" size="small" @click="initTableData()">查询</el-button>
        <el-button size="small" @click="dataReset()">清空</el-button>
        <el-button size="small" type="info" @click="handleAdd()">新增</el-button>
        <el-button size="small" type="danger" @click="deleteEvent()">删除</el-button>
      </div>
    </el-form>
    <div>
      <el-table ref="tblMain" style="margin-top: 10px" :data="tblMain.items" @selection-change="handleSelectionChange"
        v-loading.body="tblMain.loading" border stripe>
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="handleThemeDetail(scope.row)">套餐明细</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="themeName" label="养护套餐名称" align="center"></el-table-column>
        <el-table-column prop="storeName" label="编制门店名称" align="center"></el-table-column>
        <el-table-column prop="themeTypeName" label="套餐类别" align="center"></el-table-column>
        <el-table-column prop="commonFlag" label="是否通用" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.commonFlag == '1'">是</span>
            <span v-else-if="scope.row.commonFlag == '0'">否</span>
          </template>
        </el-table-column>
        <el-table-column prop="carType" width="300" label="适用车型" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="enable" label="状态" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.enable == '1'" type="success">启用</el-tag>
            <el-tag v-else-if="scope.row.enable == '0'" type="danger">禁用</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 10px" :current-page.sync="tblMain.currentPage" :page-size="tblMain.pageSize"
        :total="tblMain.total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
    </div>
    <theme-model-dialog ref="modelForm" @ok="modelFormOk"></theme-model-dialog>
    <theme-model-detail-dialog ref="modelDetailForm" @ok="modelDetailFormOk"></theme-model-detail-dialog>
  </div>
</template>

<script>
import ThemeModelDialog from './components/ThemeModelDialog'
import ThemeModelDetailDialog from './components/ThemeModelDetailDialog'
import tool from '@/tool'
import { getDictionaryItemMap } from "@/api/common";
import { themeModelList, themeModelDel } from '@/api/theme'
export default {
  name: 'ThemeModel',
  components: {
    ThemeModelDialog,
    ThemeModelDetailDialog
  },
  data () {
    return {
      tblMain: tool.genTableData({
        param: {
          themeName: ''
        },
        items: []
      }),
      themeTypeList: []
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      getDictionaryItemMap({ codeArr: "themeType" }).then((res) => {
        let data = res.data;
        if (data && data.code == 0) {
          this.themeTypeList = data.data.themeType;
        }
        this.initTableData()
      });
    },
    handleAdd () {
      this.$refs.modelForm.add()
      this.$refs.modelForm.title = '新增'
    },
    handleEdit (val) {
      this.$refs.modelForm.edit(val)
      this.$refs.modelForm.title = '编辑'
    },
    handleThemeDetail (val) {
      this.$refs.modelDetailForm.edit(val)
      this.$refs.modelDetailForm.title = '套餐明细'
    },
    handleSetFunction (val) {
      this.$refs.roleFunction.set(val)
    },
    modelFormOk () {
      this.initTableData()
    },
    modelDetailFormOk () {
      this.initTableData()
    },
    async deleteEvent () {
      if (this.tblMain.selection.length == 0) {
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('确定删除选中数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let params = []
          this.tblMain.selection.forEach((element, index) => {
            params.push(element.id)
          })
          await this.deleteTblMain(params)
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '删除失败'
          // })
        })
    },
    // 单个删除
    async deleteRow (val) {
      this.$confirm('确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let params = []
          params.push(val.id)
          await this.deleteTblMain(params)
        })
        .catch(() => { })
    },
    // 删除数据
    deleteTblMain (params) {
      let me = this
      me.tblMain.loading = true
      let idParam = { ids: params }
      themeModelDel(idParam)
        .then((res) => {
          me.tblMain.loading = false
          let data = res.data
          if (data && data.code == 0) {
            me.$message.success('删除成功')
            this.initTableData()
          }
        })
        .catch(() => {
          me.$message.error('请求失败')
          me.tblMain.loading = false
        })
    },
    dataReset () {
      this.tblMain.currentPage = 1
      this.tblMain.pageSize = 10
      this.tblMain.param.themeName = ''
      this.initTableData()
    },
    handleSelectionChange (val) {
      this.tblMain.selection = val
    },
    handleSizeChange (val) {
      this.tblMain.pageSize = val
      this.initTableData()
    },
    handleCurrentChange (val) {
      this.tblMain.currentPage = val
      this.initTableData()
    },
    initTableData () {
      let me = this
      me.tblMain.selection = []
      let param = {
        themeName: me.tblMain.param.themeName,
        page: me.tblMain.currentPage,
        size: me.tblMain.pageSize
      }
      me.tblMain.loading = true
      themeModelList(param).then((res) => {
        me.tblMain.loading = false
        let data = res.data
        if (data && data.code == 0) {
          me.tblMain.items = data.data.records
          me.tblMain.total = data.data.total
          me.tblMain.items.forEach(element => {
            if (!element.carType) {
              element.carType = "所有车型";
            }
            this.themeTypeList.forEach(el => {
              if (element.themeType == el.dictItemCode) {
                element.themeTypeName = el.dictItemName
              }
            });
          });
        }
      })
    }
  }
}
</script>
